{% extends "check/checkindex.html" %}

{% block detail %}

<script src="/static/plugins/jquery.min.js"></script>

<script type="text/javascript" src="/static/js/echarts.min.js"></script>

{#
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>#}


<div class="row" name="first">

    <div class="col-lg-6" name="quyu">

        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">西北区域公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px;">
                <div id="yc1" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var chart = echarts.init(document.getElementById('yc1'), 'white', {renderer: 'canvas'});
                                var url = "http://" + hoststr + "/check/api_yc1?date=" + "{{ datestr }}";
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6" name="shanxi">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">山西公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px">
                <div id="yc2" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var url = "http://" + hoststr + "/check/api_yc2?date=" + "{{ datestr }}";
                                var chart = echarts.init(document.getElementById('yc2'), 'white', {renderer: 'canvas'});
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>

            </div>
        </div>
    </div>


</div>
<div class="row" name="secend">

    <div class="col-lg-3" name="taiyuan">

        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">太原公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px;">
                <div id="yc3" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var url = "http://" + hoststr + "/check/api_yc3?date=" + "{{ datestr }}";
                                var chart = echarts.init(document.getElementById('yc3'), 'white', {renderer: 'canvas'});
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3" name="datong">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">大同公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px">
                <div id="yc4" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var url = "http://" + hoststr + "/check/api_yc4?date=" + "{{ datestr }}";
                                var chart = echarts.init(document.getElementById('yc4'), 'white', {renderer: 'canvas'});
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>

            </div>
        </div>
    </div>
    <div class="col-lg-3" name="lingfen">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">临汾公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px">
                <div id="yc5" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var url = "http://" + hoststr + "/check/api_yc5?date=" + "{{ datestr }}";
                                var chart = echarts.init(document.getElementById('yc5'), 'white', {renderer: 'canvas'});
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>

            </div>
        </div>
    </div>
    <div class="col-lg-3" name="changzhi">
        <div class="panel panel-info" style="box-shadow: #c6c6c6 0px 0px 5px 5px">
            <div class="panel-heading" style="height: 35px">
                <h3 class="panel-title">长治公司考勤异常</h3>
            </div>
            <div class="panel-body" style="height: 300px">

                <div id="yc6" style="width:100%; height:300px;">
                    <script>
                        $(
                            function () {
                                var hoststr = window.location.host
                                var url = "http://" + hoststr + "/check/api_yc6?date=" + "{{ datestr }}";
                                var chart = echarts.init(document.getElementById('yc6'), 'white', {renderer: 'canvas'});
                                $.ajax({
                                    type: "GET",
                                    url: url,
                                    dataType: 'json',
                                    success: function (result) {
                                        chart.setOption(result);
                                    }
                                });
                            }
                        )
                    </script>
                </div>
            </div>
        </div>
    </div>


</div>


{% endblock %}